<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="container">
			<div class="bgWhite bgRadius">
				<card :configArr="Model.configArr" @changingCondition="cardEmit"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<!-- 高级搜索 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">礼品商城列表</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item">审核</div>
						</div>
					</div>
				</el-row>
				<el-row class="table-bg">
					<el-table :data="Model.tableData" stripe border :row-style="selectedHighlight"  @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50" fixed></el-table-column>
						<el-table-column 
						label="订单单号" 
						width="194"
						>
							<template slot-scope="scope">
								<el-button type="text" @click="tableDetail(scope.row)"><a class="detial-link">{{scope.row.saleNumber}}</a></el-button>
							</template>
						</el-table-column>
						<el-table-column 
						v-for="(item,index) in Model.tableHeaderData"
						:key="item.prop"
						:prop="item.prop" 
						:label="item.label" 
						:width="item.width"
						>
						</el-table-column>
					</el-table>
				</el-row>
				<!-- 分页 -->
				<el-row class="pagination-cont">
				    <el-pagination
				      @size-change="handleSizeChange"
				      background
				      @current-change="handleCurrentChange"
				      :current-page="Model.paginationObject.currentPage"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="Model.paginationObject.pageSize"
					  :pager-count="5"
				      layout="sizes, prev, pager, next, jumper, slot"
				      :total="Model.paginationObject.total">
				      <div class="pagination-slot">
				        显示
				        <p class="slot-i">{{Model.paginationObject.num1}}</p>
				        到
				        <p class="slot-i">{{Model.paginationObject.num2}}</p>
				        ，共
				        <p class="slot-i">{{Model.paginationObject.total}}</p>
				        记录
				      </div>
				    </el-pagination>
				</el-row>
			</div>	
		</div>
		<!-- 支付弹框 -->
		<el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog">
			<div class="common-table-title">
			<div class="common-table-icon"></div>
			<div class="common-table-fl">添加收款明细</div>
			</div>
			<div style="padding:30px;background: #fff;">
				<el-form :model="Model.dialogForm">
					<el-form-item label="支付方式：">
						<el-select size="small" v-model="Model.dialogForm.paymentMethod" placeholder="请选择支付方式" style="width:200px">
							<el-option label="支付宝" value="1"></el-option>
							<el-option label="现金" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="流水号：" >
						<el-input size="small" v-model="Model.dialogForm.serialNumber"></el-input>
					</el-form-item>
					<el-form-item label="支付金额：" >
						<el-input size="small" v-model="Model.dialogForm.payMoney"></el-input>
					</el-form-item>
					<el-form-item label="支付日期：" >
						<el-date-picker
						size="small"
						v-model="Model.dialogForm.createTime"
						type="datetime"
						placeholder="选择日期时间"
						style="width:200px"
						>
						</el-date-picker>
					</el-form-item>
				</el-form>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="comfirmPay">确定</div>
					<div class="viewDialogFooterCancel"  @click="Model.dialogFormVisible = false">取消</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import pagination from "@/components/common/pagination.vue";
	import card from '@/components/common/filterBtns';
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking,
			card
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
